<!--考试记录查看页面-->
<template>
  <div>
    <el-container>
      <el-header align="center" style="font-size: 30px">
        {{ propsData.examinationPaperName }}
      </el-header>
      <el-main>
        <el-card style="padding: 0px" class="box-card">
          <div slot="header" class="clearfix">
            <span>★考试成绩==================</span>
          </div>
          <el-row>
            <el-col :span="2"><b>学员：</b></el-col>
            <el-col :span="6">{{ propsData.examineeUserName }}</el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="4"><b>通过分/总分：</b></el-col>
            <el-col
              :span="6"
            >{{ propsData.passScore }}/{{ propsData.totalScore }}</el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="4"><b>是否通过：</b></el-col>
            <el-col
              :span="6"
            ><span
              :style="{
                color:
                  propsData.passFlag == 0
                    ? 'black'
                    : propsData.passFlag == 1
                      ? 'greedy'
                      : 'red'
              }"
            >{{
              propsData.passFlag == 0
                ? '未评'
                : propsData.passFlag == 1
                  ? '合格'
                  : '不合格'
            }}</span></el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="4"><b>开始考试时间：</b></el-col>
            <el-col :span="6">{{ propsData.examineeTime }}</el-col>
          </el-row>
          <el-row style="margin-top: 20px">
            <el-col :span="4"><b>交卷时间：</b></el-col>
            <el-col :span="6">{{ propsData.handInTime }}</el-col>
          </el-row>
        </el-card>

        <el-card
          v-for="(
            examinationPaperQuestion, index
          ) in viewData.examinationPaperQuestionList"
          :key="index"
          class="box-card"
          style="margin-top: 15px"
        >
          <div slot="header" class="clearfix">
            <span>{{
              indexs[index] + type[examinationPaperQuestion.type]
            }}</span>
          </div>
          <el-row
            v-for="(
              question, questionIndex
            ) in examinationPaperQuestion.questionList"
            :key="questionIndex"
            style="margin-top: 15px"
          >
            <el-col
              :span="24"
              style="margin-bottom: 10px; font-size: 16px"
            >{{ parseInt(questionIndex) + 1 }}、{{
              question.content
            }}(题分：<span style="color: red">{{ question.score }}</span>分)</el-col>
            <el-col
              v-for="(option, optionIndex) in question.options"
              :key="optionIndex"
              style="padding: 5px 0px 5px 25px"
            >{{ option.opt }}.{{ option.content }}</el-col>
            <el-col
              style="padding: 30px 0px 5px 25px"
            >参考答案：{{ question.answer }}</el-col>
            <el-col
              v-if="answerData[question.examinationQuestionId].factAnswer"
              style="padding: 5px 0px 5px 25px"
            >学员答案：{{
              answerData[question.examinationQuestionId].factAnswer
            }}</el-col>
            <el-col
              v-if="
                question.type == 1 || question.type == 2 || question.type == 3
              "
              style="padding: 5px 0px 5px 25px"
            >评判结果：
              <span
                v-if="
                  answerData[question.examinationQuestionId].resultFlag == false
                "
                style="color: #ef0f0f"
              >×</span>
              <span v-else style="color: #3bf172">√</span></el-col>
            <el-col
              v-if="
                !propsData.passFlag == 0 &&
                  (question.type == 5 || question.type == 4)
              "
              style="padding: 5px 0px 5px 25px"
            >本题得分：{{
              answerData[question.examinationQuestionId].factScore
            }}</el-col>
            <el-col
              v-if="
                propsData.passFlag == 0 &&
                  (question.type == 5 || question.type == 4)
              "
              style="padding: 5px 0px 5px 25px"
            >本题评分：

              <el-input
                ref="inputData"
                v-model="
                  saveData.questionDataList[
                    answerData[question.examinationQuestionId]
                      .examinationRecordQuestionId + 'key'
                  ]
                "
                size="mini"
                style="width: 120px"
                type="number"
                min="0"
                :max="question.score"
                placeholder="请输入评分"
              />
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>试卷评语</span>
          </div>
          <el-input
            v-model="saveData.comment"
            :disabled="!propsData.passFlag == 0"
            type="textarea"
            placeholder="试卷评语"
            max-length="200"
          />
        </el-card>
        <!--         -->
        <el-button
          v-if="propsData.passFlag == 0"
          type="primary"
          style="float: right; margin: 30px"
          @click="commit"
        >提交</el-button>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { correctExaminationRecord } from '@/api/ts/record'

export default {
  name: 'Index',
  props: ['propsData', 'dates'],
  data() {
    return {
      viewData: this.propsData.previewExaminationPaperResponse,
      answerData: this.propsData.getExaminationRecordQuestionResponses,
      type: ['未定义', '单选题', '多选题', '判断题', '填空题', '简答题'],
      indexs: ['一、', '二、', '三、', '四、', '五、', '六、'],
      saveData: {
        examinationRecordId: this.propsData.examinationRecordId,
        questionDataList: {},
        comment: this.propsData.comment
      },
      count: 0
    }
  },
  mounted() {
    this.getUnapproved()
  },
  methods: {
    getUnapproved() {
      console.log(this.answerData, 'this.answerData')
      for (const answerDataKey in this.answerData) {
        console.log(answerDataKey, 'answerDataKey', this.answerData)
        if (this.answerData[answerDataKey].graded == 0) {
          this.count += 1
        }
      }
    },
    commit() {
      console.log('saveData,', this.$refs.inputData)

      this.$refs.inputData.forEach((item) => {
        console.log(item.value)
        if (!item.value) {
          return (this.count = true)
        } else {
          return (this.count = false)
        }
      })
      var sum = 0
      for (const questionDataListKey in this.saveData.questionDataList) {
        if (
          this.saveData.questionDataList[questionDataListKey] &&
          this.saveData.questionDataList[questionDataListKey] != ''
        ) {
          sum += 1
        }
      }
      if (this.count) {
        this.$message.info('还有选项未评分，请检查试卷！')
        return
      }
      var saveData = JSON.stringify(this.saveData)
      correctExaminationRecord({ saveData: saveData }).then((res) => {
        this.$message.success('保存成功')
        this.$emit('closeDialogVal', false)
        this.$emit('getDataList')
      })
    }
  }
}
</script>

<style scoped>
</style>

